<script lang="ts" setup>
import { ref, onMounted, reactive, computed } from 'vue'
import { ElMessage, FormInstance, FormRules } from 'element-plus'
import yspglService from '@/api/yspgl'
import plxgDialog from '@/views/gdgl/gdzl/ysp/dialogs/plxg-dialog.vue'
import { useMainStore } from '@/store/main'
import { getFldm } from '@/utils/get-fldm'
import { useRoute } from 'vue-router'
import { mlxxMainStore } from '@/store/mlxx'
const mlxxStore = mlxxMainStore()
const route = useRoute()
const store = useMainStore()

const emit = defineEmits(['refresh'])
// 获取ref
const plxgDialogRef = ref()
const zpFormRef = ref()

defineProps({
  gdjdList: {
    type: Object,
    default: null,
  },
})
// 入参

// 生命周期
onMounted(() => {
  // 获取密级
  getMj()
  // 获取保管期限
  getBgqx()
  // 获取音视频类别
  getYxlx()
})

/*
 * 获取密级（分类代码）
 */
const mjList = ref<any>([])
const getMj = async () => {
  mjList.value = await getFldm('gd006')
}
// 获取保管期限分类代码
const bgqxList = ref<any>([])
const getBgqx = async () => {
  bgqxList.value = await getFldm('gd020')
}
// 获取音视频类别
const yxlxList = ref<any>([])
const getYxlx = async () => {
  yxlxList.value = await getFldm('gd021')
}
const form = ref({
  bgqxdm: '',
  bgqxmc: '',
  dabh: '',
  dzwjmc: '',
  hdms: '',
  hour: '',
  lzdwmc: '',
  lzr: '',
  lzrq: '',
  minute: '',
  mjdm: '',
  mjmc: '',
  mlbh: '',
  mllxdm: '',
  nd: '',
  sc: '',
  second: '',
  sxh: '',
  sxmlmc: '',
  tjr: '',
  wjdx: '',
  wjgs: '',
  ysplbmc: '',
  ysplbdm: '',
  zrz: '',
  cbdw: '',
  cbbm: '',
  tm: '',
  gdrxm: '',
  dh: '',
  cjh: '',
})

const zpForm = ref({
  cbdw: '',
  cbbm: '',
  tm: '',
  nd: '',
  tjr: '',
  paz: '',
  psdd: '',
  psrq: '',
  mjdm: '',
  mjmc: '',
  bgqxmc: '',
  bgqxdm: '',
  bz: '',
  gdrxm: '',
  dh: '',
  cjh: '',
})

const zpFormRules = reactive<FormRules>({
  tm: [{ required: true, message: '', trigger: 'blur' }],
  nd: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  tjr: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  paz: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  psdd: [
    {
      required: true,
      message: '',
      trigger: 'blur',
    },
  ],
  psrq: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
  mjdm: [
    {
      required: true,
      message: '',
      trigger: 'change',
    },
  ],
})
const mjChange = (value: string) => {
  const temp = mjList.value.find((mj: any) => mj.dm === value)
  zpForm.value.mjmc = temp?.mc
}

const bgqxChange = (value: string) => {
  const temp = bgqxList.value.find((qx: any) => qx.dm === value)
  zpForm.value.bgqxmc = temp?.mc
}
/*
 * 打开批量修改目录弹框
 */
const openUpdateMlDialog = () => {
  plxgDialogRef.value.openDialog()
}

/*
 * 保存照片（成功抛出刷新）
 */
const saveZp = async (formEl: FormInstance | undefined) => {
  if (!formEl) return
  await formEl.validate((valid) => {
    if (valid) {
      const params = {
        ...store.nodeTreeData,
        ...zpForm.value,
        sxh: store.nodeTreeData.mlsxh,
        sxmlmc: zpForm.value.tm,
        // mlbh: store.nodeTreeData.bh,
        mllydm: 'gd0590001',
      }
      yspglService
        .saveZpml(params, route.query.ajbh as string)
        .then(() => {
          ElMessage({ type: 'success', message: '保存成功' })
          emit('refresh')
        })
        .catch((err) => {
          !err.isError && ElMessage({ type: 'warning', message: err.message })
        })
    } else {
      ElMessage({ type: 'warning', message: '请补全信息' })
    }
  })
}
const yspxxData = ref<any>([])
const getWjxqxx = (data: any) => {
  yspxxData.value = data
  if (data.lzr) {
    form.value = data
    form.value.nd = data.nd?.trim()
  } else {
    zpForm.value = data
    zpForm.value.nd = data.nd?.trim()
  }
  zpFormRef.value.clearValidate()
}

const disabled = computed(
  () =>
    store.nodeTreeData?.bh !== store.jzsmZpNode?.bh &&
    store.nodeTreeData?.fbh !== store.jzsmZpNode?.bh,
)

defineExpose({ getWjxqxx })
</script>
<template>
  <div class="container">
    <div class="top-button">
      <!-- <button
        class="btn_operation"
        @click="openUpdateMlDialog()"
        :disabled="!store.$state.nodeTreeData?.cj"
      >
        <div class="btn-editxgaj"></div>
        批量修改
      </button> -->
      <button
        class="btn_operation"
        @click="saveZp(zpFormRef)"
        :disabled="
          !store.nodeTreeData.sfkbj ||
          store.nodeTreeData.sfkbj === 'N' ||
          !store.nodeTreeData?.cj ||
          !mlxxStore.isUnlockReadOnly
        "
      >
        <div class="btn-save"></div>
        保存
      </button>
    </div>
    <div class="content-table">
      <el-form ref="zpFormRef" :model="zpForm" :rules="zpFormRules" class="demo-ruleForm">
        <table class="form-table">
          <tbody>
            <tr>
              <td class="title">承办单位</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="zpForm.cbdw" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">承办部门</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input v-model="zpForm.cbbm" maxlength="50" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                题名
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="tm">
                  <el-input v-model="zpForm.tm" maxlength="30" show-word-limit></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                年度
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="nd">
                  <el-input
                    v-model="zpForm.nd"
                    maxlength="4"
                    @input="zpForm.nd = zpForm.nd.replace(/[^\d.]/g, '').trim()"
                  ></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                提交人
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="tjr">
                  <el-input v-model="zpForm.tjr" maxlength="50"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                拍摄者
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="paz">
                  <el-input v-model="zpForm.paz" maxlength="50"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">
                <span style="color: red">*</span>
                拍摄地点
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="psdd">
                  <el-input v-model="zpForm.psdd" maxlength="50"></el-input>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td class="title">
                <span style="color: red">*</span>
                拍摄时间
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="psrq">
                  <el-date-picker
                    style="width: 100%"
                    v-model="zpForm.psrq"
                    type="date"
                    placeholder="请选择"
                    size="small"
                    value-format="YYYY-MM-DD"
                    format="YYYY-MM-DD"
                  />
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td class="title">
                <span style="color: red">*</span>
                密级
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="mjdm">
                  <el-select
                    v-model="zpForm.mjdm"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    @change="mjChange"
                  >
                    <el-option
                      v-for="zrritem in mjList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="zrritem.dm"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td class="title">
                <span style="color: red">*</span>
                保管期限
              </td>
              <td class="text">
                <el-form-item style="width: 100%" prop="bgqxdm">
                  <el-select
                    v-model="zpForm.bgqxdm"
                    clearable
                    placeholder="请选择"
                    style="width: 100%"
                    @change="bgqxChange"
                  >
                    <el-option
                      v-for="zrritem in bgqxList"
                      :key="zrritem.dm"
                      :label="zrritem.mc"
                      :value="zrritem.dm"
                    >
                    </el-option>
                  </el-select>
                </el-form-item>
              </td>
            </tr>

            <tr>
              <td class="title">备注</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input type="textarea" :row="3" v-model="zpForm.bz" maxlength="50"></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">归档人</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="zpForm.gdrxm" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">档号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="zpForm.dh" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
            <tr>
              <td class="title">参见号</td>
              <td class="text">
                <el-form-item style="width: 100%">
                  <el-input maxlength="50" v-model="zpForm.cjh" disabled></el-input>
                </el-form-item>
              </td>
            </tr>
          </tbody>
        </table>
      </el-form>
    </div>
    <plxg-dialog ref="plxgDialogRef" @refresh="emit('refresh')"></plxg-dialog>
  </div>
</template>
<style lang="scss" scoped>
.container {
  width: 100%;
  height: 100%;

  .top-button {
    width: 100%;
    display: flex;
    justify-content: flex-end;
    align-items: center;
  }

  .content-table {
    height: calc(100% - 40px);
    overflow-y: auto;
    margin-top: 10px;
  }
}

.form-table {
  width: 100%;
}

.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr td {
  border: 1px solid #dfe8f3;
}
.form-table tbody tr .title {
  padding-right: 10px;
  width: 17%;
  text-align: right;
}
.form-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
}

.show-table {
  width: calc(100% - 20px);
  margin: 10px 10px 10px 10px;
}

.show-table tbody tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
}
.show-table thead tr td {
  border: 1px solid #dfe8f3;
  height: 35px;
  font-weight: bold;
  text-align: center;
  width: 25%;
  font-size: 16px;
}
.show-table tbody tr .title {
  padding-right: 10px;
  text-align: right;
  width: 16%;
}
.show-table tbody tr .text {
  padding-left: 10px;
  padding-right: 10px;
  width: 35%;
}
.btn-div {
  widows: 100%;
  height: 35px;
  padding: 10px 3px;
  text-align: right;
}

.ryList1 {
  margin-top: 10px;
  height: calc(100% - 208px);
}
.ryList2 {
  margin-top: 10px;
  height: calc(100% - 173px);
}

.btn_check {
  margin: 5px;
}
.btn_checked {
  margin: 5px;
}
.header_sq {
  border-bottom: 1px solid #dfe8f3;
  margin-bottom: 10px;
  > div {
    float: right;
    margin-top: 10px;
  }
  p {
    margin-left: 10px;
    line-height: 40px;
    display: inline-block;
    &:before {
      content: '';
      margin-right: 10px;
      vertical-align: middle;
      display: inline-block;
      width: 5px;
      height: 16px;
      background: #4084f0;
    }
  }
}

:deep(.el-form-item) {
  margin-bottom: 0px;
}

:deep(.el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-input.is-disabled .el-input__wrapper) {
  box-shadow: none;
}

:deep(.el-select__wrapper) {
  box-shadow: none;
}
:deep(.el-select__wrapper:hover) {
  box-shadow: none;
}

:deep(.el-textarea__inner) {
  box-shadow: none;
}
:deep(.el-input-number .el-input__inner) {
  text-align: left;
}
</style>

<style lang="scss">
.form-table tbody tr {
  height: 40px;
}

.form-table tbody tr .text {
  .el-form-item__error {
    position: relative;
  }
}
.form-table tbody tr .text {
  .el-input.is-disabled .el-input__inner[disabled='disabled'] {
    background: #ebeff3;
    color: #cad0d7;
    border: none;
  }
}
.form-table tbody tr .text {
  .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
.show-table tbody tr td {
  .el-input.el-input--suffix > .el-input__inner {
    border: none;
    &:hover {
      border: none;
    }
  }
}
</style>
